<template>
    <div class="app-container">
        <div class="filter-container">
            <el-row type="flex" justify="space-between">
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="filter_selected.equipmenttype"
                               filterable clearable
                               placeholder="Select"
                    >
                        <el-option
                                v-for="(item, index) in filter_option.equipmenttype"
                                :key="index"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="filter_selected.filterplan"
                               filterable
                               @change="selectTrigger(filter_selected.filterplan)"
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in filter_option.filterplan"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="filter_selected.tool"
                               filterable
                               @change="selectTrigger(filter_selected.tool)"
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in filter_option.tool"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="filter_selected.moduletype"
                               filterable
                               @change="selectTrigger(filter_selected.moduletype)"
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in filter_option.moduletype"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
            </el-row>

            <el-row type="flex" justify="space-between">
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="filter_selected.recipename"
                               filterable
                               @change="selectTrigger(filter_selected.recipename)"
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in filter_option.recipename"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select class="filter-item" style="width: 200px;"
                               v-model="filter_selected.sensoralias"
                               filterable
                               placeholder="Select"
                    >
                        <el-option
                                v-for="item in filter_option.sensoralias"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-button class="filter-item" type="primary" @click="onSearch">Search
                    </el-button>
                    <input
                            ref="excel-upload-input"
                            class="excel-upload-input"
                            type="file"
                            accept=".xlsx, .xls"
                            @change="handleClick"
                    />
                    <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="handleUpload">
                        Import
                    </el-button>
                    <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="onSearch">Export
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <div>
            <!--列表-->
            <el-table
                    :data="ruleresult"
                    highlight-current-row
                    :row-style="{height:'40px'}"
                    :cell-style="{padding:'0px'}"
                    v-loading="listLoading"
                    @selection-change="selsChange"
                    style="width: 100%;"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="department" label="Department" width="140" sortable></el-table-column>
                <el-table-column prop="section" label="Section" width="100" sortable></el-table-column>
                <el-table-column prop="equipmenttype" label="Equip Type " width="140" sortable></el-table-column>
                <el-table-column prop="filterplan" label="Filter Plan " width="170" sortable></el-table-column>
                <el-table-column prop="tool" label="Tool" width="120" sortable></el-table-column>
                <el-table-column prop="chamber" label="Chamber" width="120" sortable></el-table-column>
                <el-table-column prop="recipealias" label="Recipe Alias" width="140" sortable></el-table-column>
                <el-table-column prop="recipename" label="Recipe Name" width="140" sortable></el-table-column>
                <el-table-column prop="sensoralias" label="Sensor Alias" width="140" sortable></el-table-column>
                <el-table-column prop label="Window" width="140" sortable></el-table-column>
                <el-table-column prop label="Static" width="120" sortable></el-table-column>
                <el-table-column prop label="CET" width="120" sortable></el-table-column>
                <el-table-column prop label="CMT" width="120" sortable></el-table-column>
                <el-table-column prop label="Golden Select" width="140" sortable></el-table-column>
                <el-table-column prop label="Default Level" width="140" sortable></el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button
                                size="small"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="total,sizes,prev, pager, next"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :page-size="10"
                    :total="total"
                    style="float:right;"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    import {getRuleResult} from "../../api/api";

    export default {
        data() {
            return {
                filter_selected: {

                },
                filter_option: {

                },
                filename: "",
                list: null,
                ruleresult: [],
                total: 0,
                page: 1,
                pagesize: 10,
                listLoading: false,
                sels: [], //列表选中列
                value: true,
                loading: false,
            };
        },
        mounted() {
        },
        methods: {
            onSearch(){

            },

            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val;
                this.getUsers();
            },

            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
                this.getUsers();
            },

            selsChange: function (sels) {
                this.sels = sels;
            },


            handleUpload() {
                this.$refs["excel-upload-input"].click();
                console.log("aaa");
            },

            handleClick(e) {
                const files = e.target.files;
                const rawFile = files[0]; // only use files[0]
                console.log(rawFile, "show me rawfile");
                if (!rawFile) return;
                // this.upload(rawFile);
            },
        }
    };
</script>
<style scoped>
    .excel-upload-input {
        display: none;
        z-index: -9999;
    }
</style>
